<template>
    <!-- 人员管理-人员培训 -->
    <div class="empTrain">
        <div class="top">
            <!-- <h1>劳务培训</h1> -->
            <div class="search">
                <div class="list">
                    <DatePicker  type="daterange"  :clearable="false"   placeholder="开始时间   -   结束时间" style="width: 200px" v-model="value" @on-change="getTime"></DatePicker>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <Select v-model="trainType" style="width:200px" placeholder="培训类型:全部">
                        <Option v-for="(item,index) in trainTypeList" :value="item.id" :key="index">{{item.name}}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <Select v-model="stateType" style="width:200px" placeholder="状态:全部">
                        <Option v-for="(item,index) in stateList" :value="item.id" :key="index">{{item.name}}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <Input v-model="keyword" placeholder="培训名称搜索" style="width:250px" clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list" @click="onSerch">
                    <Button type="primary">搜索</Button>
                </div>
                <div class="list" @click="onReset">
                    <Button>重置</Button>
                </div>
            </div>
            <div class="down">
                <el-button :type="!btnList.includes('emp/train/add')?'info':'primary'" @click="updateRow(0)" :disabled="!btnList.includes('emp/train/add')" size="small" plain>添加培训记录</el-button>
            </div>
        </div>
        <div class="bottom">
            <div class="table">
                <el-table :data="list" style="width: 100%" :height="tableHeight" :stripe='true'>
                    <el-table-column fixed prop="name" label="培训名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="trainTypeName" label="培训类型"  width="200"></el-table-column>
                    <el-table-column prop="organizer" label="组织者" width="100" align="center"></el-table-column>
                    <el-table-column prop="source" label="录入方式" width="100" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.source">{{scope.row.source == 'ms' ? '后台' : '培训箱'}}</span>
                            <span v-else>后台</span>
                        </template>
                    </el-table-column >
                    <el-table-column prop="date" label="日期"  width="150" align="center"></el-table-column>
                    <el-table-column prop="duration" label="培训时长（H）"  width="150" align="center"></el-table-column>
                    <el-table-column prop="trainPhoto" label="培训照片" width="200">
                        <template slot-scope="scope">
                            <template v-if="scope.row.trainPhotoArr && scope.row.trainPhotoArr.length > 0 ">
                                <div class="p" style="display: flex;justify-content: flex-start;align-items: center">
                                    <el-image :src="item" v-for="(item,index) in scope.row.trainPhotoArr" :key="index" style="width:30px;height: 30px;margin-right: 5px" :preview-src-list="[item]" ></el-image>
                                    <span v-if="scope.row.trainPhoto.length > 5">...</span>
                                </div>
                            </template>
                            <template v-else>
                                <span>—</span>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="状态" width="100" align="center">
                        <template slot-scope="scope">
                            <el-tag type="info" v-if="scope.row.state == 0" size="small">未完成</el-tag>
                            <el-tag type="success" v-if="scope.row.state == 1" size="small">已完成</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="250" align="center">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="getTrainee(scope.$index, list)" type="text" size="small">人员成绩</el-button>
                            <el-button @click.native.prevent="updateRow(2,scope.$index, list)" type="text" size="small">详情</el-button>
                            <el-button :style="!btnList.includes('emp/train/del')?'color:#C0C4CC':'color:red'" :disabled="!btnList.includes('emp/train/del')" @click.native.prevent="remove(scope.$index, list)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                </div>
            </div>
        </div>

        <Modal v-model="updateModal" title="新增培训记录" width="1000px" :mask-closable="false" @on-visible-change='visibleChangeFn'>
            <div class="msg">
                <h2>培训信息</h2>
                <div class="list">
                    <div class="item">
                        <span class="tip">*</span>
                        <span>培训名称:</span>
                        <Input v-model="train.name" placeholder="请输入培训名称" show-word-limit :maxlength="maxlength"  style="width: 300px" clearable />
                    </div>
                    <div class="item">
                        <span class="tip">*</span>
                        <span>培训类型:</span>
                        <Select v-model="train.trainType" style="width:300px" placeholder="请选择培训类型" @on-change="getTrainType">
                            <Option v-for="item in trainEmpTypeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>培训时长:</span>
                        <Input v-model="train.duration" placeholder="请输入培训时长" style="width: 280px" clearable />
                        <span>小时</span>
                    </div>
                    <div class="item">
                        <span>日期:</span>
                        <DatePicker type="date" placeholder="请选择日期" style="width: 300px" v-model="train.date" @on-change="getDate" :clearable="false"></DatePicker>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>培训地点:</span>
                        <Input v-model="train.address" placeholder="请输入培训地点" style="width: 300px" clearable />
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>培训图片：</span>
                        <div class="imgBox">
                            <el-upload
                                :class="{hideAdd:imgFlag}"
                                ref='uploadImg'
                                :headers="headers"
                                :action="$axios.defaults.baseURL+'/ms/api/train/uploadImg'"
                                list-type="picture-card"
                                accept="image/png, image/jpg, image/jpeg"
                                :before-upload="beforeIMgUpload"
                                :on-success="reportlogImgSuccess"
                                name="file"
                                :limit=10
                                :on-exceed="exceedImg"
                                :on-remove="handleReportRemove">
                                <i  class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                    </div>
                </div>
                <h2>人员信息</h2>
                <div class="list">
                    <div class="item">
                        <span>组织者:</span>
                        <Select v-model="train.organizerId" style="width:300px" placeholder="请选择" :filterable="true" @on-change="getOrganizer">
                            <Option v-for="item in empList" :value="item.empId" :key="item.empId">{{item.empName}}</Option>
                        </Select>
                    </div>
                    <div class="item">
                        <span>培训者:</span>
                        <Select v-model="train.trainerId" style="width:300px" placeholder="请选择" :filterable="true" @on-change="getTrainerId">
                            <Option v-for="item in empList" :value="item.empId" :key="item.empId">{{item.empName}}</Option>
                        </Select>
                    </div>
                </div>
                <div class="list" style="width: 100%;">
                    <span style="color:var(--themeColor);width: 120px;font-size: 14px;font-weight: 400;">培训内容：</span>
                    <Input v-model="train.content" placeholder="请输入培训内容" style="flex:1;" type="textarea" show-word-limit :maxlength="300" clearable />
                </div>
                <div class="list" style="width: 100%;">
                    <div class="item upload" style="width: 100%;">
                        <span style="color: var(--themeColor);width: 120px;font-size: 14px;font-weight: 400;">附件：</span>
                        <div class="clear" v-if="fileUrl">
                            <img src="../../assets/images/emp/train/rule_del.png" alt="" class="delImg" @click="clearFlieFn" />
                        </div>
                        <el-upload
                            class="avatar-uploader"
                            :headers="headers"
                            :action="$axios.defaults.baseURL+'/ms/api/train/uploadImg'"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :accept="acceptObj"
                            :before-upload="beforeAvatarUpload">
                            <template v-if="fileUrl">
                                <img class="avatar" :src="fileUrl" alt="" v-if="imgList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-word.png" alt="" v-else-if="wordList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-excel.png" alt="" v-else-if="excelList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-ppt.png" alt="" v-else-if="pptList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-pdf.png" alt="" v-else-if="pdfList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-video.png" alt="" v-else-if="videoList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-audio.png" v-else-if="audioList.includes(fileType)" alt="">
                                <img class="avatar" src="./../../assets/images/emp/common/file-zip.png" v-else-if="zipList.includes(fileType)" alt="">
                                <img class="avatar" src="./../../assets/images/emp/common/file-txt.png" v-else-if="txtList.includes(fileType)" alt="">
                            </template>
                            <template v-else>
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </template>
                        </el-upload>
                        <span style="flex: 1;margin-left: 15px;">可上传最大为 50 MB 文件。如果文件比较大请先压缩文件</span>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="detailsModal" :title="isAdd?'培训记录详情':'修改培训记录'" width="1000px" :mask-closable="false" :footer-hide="isAdd">
            <div class="msg" v-if="isAdd">
                <div class="p" style="display:flex;justify-content: flex-start;align-items: center;margin-top: 15px">
                    <h2 style="margin-top: 0; margin-right: 20px">培训信息</h2>
                    <el-button v-if="train.state == 0 &&  btnList.includes('emp/train/edit')" @click="updateRow(1)" type="primary" size="small" plain>编辑</el-button>
                </div>
                <div class="list">
                    <div class="item">
                        <span>培训名称:</span>
                        <span style="width: 300px">{{detailsObj.name ? detailsObj.name : '—'}}</span>
                    </div>
                    <div class="item">
                        <span>培训类型:</span>
                        <span style="width: 300px">{{detailsObj.trainTypeName ? detailsObj.trainTypeName : '—'}}</span>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>日期:</span>
                        <span style="width: 300px">{{detailsObj.date ? detailsObj.date : '—'}}</span>
                    </div>
                    <div class="item" >
                        <span>培训时长:</span>
                        <span style="width: 300px">{{detailsObj.duration ? detailsObj.duration : '—'}} 小时</span>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>培训地点:</span>
                        <span style="width: 300px">{{detailsObj.address ? detailsObj.address : '—'}}</span>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>培训图片:</span>
                        <template v-if="detailsObj.trainPhoto && detailsObj.trainPhoto.length > 0 ">
                            <el-image  :src="item" alt="" v-for="(item,index) in detailsObj.trainPhoto" :key="index" style="width:60px;height: 60px;margin-right: 10px" :preview-src-list="[item]" ></el-image>
                        </template>
                        <template v-else>
                            <span >—</span>
                        </template>
                    </div>
                </div>
                <h2>人员信息</h2>
                <div class="list">
                    <div class="item">
                        <span>组织者:</span>
                        <span style="width: 300px">{{detailsObj.organizer ? detailsObj.organizer : '—'}}</span>
                    </div>
                    <div class="item">
                        <span>培训者:</span>
                        <span style="width: 300px">{{detailsObj.trainer ? detailsObj.trainer : '—'}}</span>
                    </div>
                </div>
                <div class="list" style="width: 100%;">
                    <span style="color:var(--themeColor);width: 120px;font-size: 14px;font-weight: 400;">培训内容：</span>
                    <span style="flex:1;">{{detailsObj.content ? detailsObj.content : '—'}}</span>
                </div>
                <div class="list" style="width: 100%;">
                    <div class="item upload">
                        <span style="color:var(--themeColor);width: 120px;font-size: 14px;font-weight: 400;">附件：</span>
                        <template v-if="detailsFileUrl">
                            <img class="avatar" @click="download(detailsFileUrl,1)" :src="detailsFileUrl" alt="" v-if="imgList.includes(detailsObj.hz)">
                            <img class="avatar" @click="download(detailsFileUrl,1)" src="./../../assets/images/emp/common/file-word.png" alt="" v-else-if="wordList.includes(detailsObj.hz)">
                            <img class="avatar" @click="download(detailsFileUrl,1)" src="./../../assets/images/emp/common/file-excel.png" alt="" v-else-if="excelList.includes(detailsObj.hz)">
                            <img class="avatar" @click="download(detailsFileUrl,1)" src="./../../assets/images/emp/common/file-ppt.png" alt="" v-else-if="pptList.includes(detailsObj.hz)">
                            <img class="avatar" @click="download(detailsFileUrl,1)" src="./../../assets/images/emp/common/file-pdf.png" alt="" v-else-if="pdfList.includes(detailsObj.hz)">
                            <img class="avatar" @click="download(detailsFileUrl,1)" src="./../../assets/images/emp/common/file-video.png" alt="" v-else-if="videoList.includes(detailsObj.hz)">
                            <img class="avatar" @click="download(detailsFileUrl,1)" src="./../../assets/images/emp/common/file-audio.png" v-else-if="audioList.includes(detailsObj.hz)" alt="">
                            <img class="avatar" @click="download(detailsFileUrl,1)" src="./../../assets/images/emp/common/file-zip.png" v-else-if="zipList.includes(detailsObj.hz)" alt="">
                            <img class="avatar" @click="download(detailsFileUrl,1)" src="./../../assets/images/emp/common/file-txt.png" v-else-if="txtList.includes(detailsObj.hz)" alt="">
                        </template>
                        <template v-else>
                            <span>—</span>
                        </template>
                    </div>
                </div>
            </div>
            <div class="msg" v-if="!isAdd">
                <h2>培训信息</h2>
                <div class="list">
                    <div class="item">
                        <span class="tip">*</span>
                        <span>培训名称:</span>
                        <Input v-model="train.name" placeholder="请输入培训名称" show-word-limit :maxlength="maxlength"  style="width: 300px" clearable />
                    </div>
                    <div class="item">
                        <span class="tip">*</span>
                        <span>培训类型:</span>
                        <Select v-model="train.trainType" style="width:300px" placeholder="请选择培训类型" @on-change="getTrainType">
                            <Option v-for="item in trainEmpTypeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>培训时长:</span>
                        <Input v-model="train.duration" placeholder="请输入培训时长" style="width: 280px" clearable />
                        <span>小时</span>
                    </div>
                    <div class="item">
                        <span>日期:</span>
                        <DatePicker type="date" placeholder="请选择日期" style="width: 300px" v-model="train.date" @on-change="getDate" :clearable="false"></DatePicker>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>培训地点:</span>
                        <Input v-model="train.address" placeholder="请输入培训地点" style="width: 300px" clearable />
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>培训图片：</span>
                        <div class="imgBox">
                            <el-upload
                                :file-list="trainPhotoArr"
                                :class="{hideAdd:imgFlag}"
                                ref='uploadImg'
                                :headers="headers"
                                :action="$axios.defaults.baseURL+'/ms/api/train/uploadImg'"
                                list-type="picture-card"
                                accept="image/png, image/jpg, image/jpeg"
                                :before-upload="beforeIMgUpload"
                                :on-success="reportlogImgSuccess"
                                name="file"
                                :limit=10
                                :on-exceed="exceedImg"
                                :on-remove="handleReportRemove">
                                <i  class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                    </div>
                </div>
                <h2>人员信息</h2>
                <div class="list">
                    <div class="item">
                        <span>组织者:</span>
                        <Select v-model="train.organizerId" style="width:300px" placeholder="请选择" :filterable="true" @on-change="getOrganizer">
                            <Option v-for="item in empList" :value="item.empId" :key="item.empId">{{item.empName}}</Option>
                        </Select>
                    </div>
                    <div class="item">
                        <span>培训者:</span>
                        <Select v-model="train.trainerId" style="width:300px" placeholder="请选择" :filterable="true" @on-change="getTrainerId">
                            <Option v-for="item in empList" :value="item.empId" :key="item.empId">{{item.empName}}</Option>
                        </Select>
                    </div>
                </div>
                <div class="list" style="width: 100%;">
                    <span style="color:#1891FF;width: 120px;font-size: 14px;font-weight: 400;">培训内容：</span>
                    <Input v-model="train.content" placeholder="请输入培训内容" style="flex:1;" type="textarea" clearable />
                </div>
                <div class="list" style="width: 100%;">
                    <div class="item upload" style="width: 100%;">
                        <span style="color:#1891FF;width: 120px;font-size: 14px;font-weight: 400;">附件：</span>
                        <div class="clear" v-if="fileUrl">
                            <img src="../../assets/images/emp/train/rule_del.png" alt="" class="delImg" @click="clearFlieFn">
                        </div>
                        <el-upload
                            class="avatar-uploader"
                            :headers="headers"
                            :action="$axios.defaults.baseURL+'/ms/api/train/uploadImg'"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :accept="acceptObj"
                            :before-upload="beforeAvatarUpload">
                            <template v-if="fileUrl">
                                <img class="avatar" :src="fileUrl" alt="" v-if="imgList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-word.png" alt="" v-else-if="wordList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-excel.png" alt="" v-else-if="excelList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-ppt.png" alt="" v-else-if="pptList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-pdf.png" alt="" v-else-if="pdfList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-video.png" alt="" v-else-if="videoList.includes(fileType)">
                                <img class="avatar" src="./../../assets/images/emp/common/file-audio.png" v-else-if="audioList.includes(fileType)" alt="">
                                <img class="avatar" src="./../../assets/images/emp/common/file-zip.png" v-else-if="zipList.includes(fileType)" alt="">
                                <img class="avatar" src="./../../assets/images/emp/common/file-txt.png" v-else-if="txtList.includes(fileType)" alt="">
                            </template>
                            <template v-else>
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </template>
                        </el-upload>
                        <span style="flex: 1;margin-left: 15px;">可上传最大为 2.0 MB 文件。如果文件比较大请先压缩文件</span>
                    </div>
                </div>

            </div>
            <div slot="footer">
                <el-button @click="cancel(4)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="completeModal" title="完成培训记录" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要完成这条培训记录吗？</div>
            <div slot="footer">
                <el-button @click="cancel(3)" type="info" size="small" plain>取消</el-button>
                <el-button @click="completeRecords" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getTypeList,
    getAttendList,
    getAttendAdd,
    getAttendEdit,
    getAttendRemove,
    getAttendComplete, getAllPersonnelList,
} from "@/api/api.js";
export default {
    data() {
        return {
            headers: {
                Authorization:localStorage.getItem('COOKIE'),
            },
            empList:[],//所有人员信息
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            keyword: "",
            deptId: "",
            trainTypeList: [],
            trainEmpTypeList:[],
            trainType: "",
            stateType: "",
            stateList: [
                {
                    id:"",
                    name:"状态:全部"
                },
                {
                    id: 0,
                    name: "未完成"
                },
                {
                    id: 1,
                    name: "已完成"
                }
            ],
            startDate: "",
            endDate: "",
            list: [],
            updateModal: false,
            isAdd: true,
            train: {
                name: "",
                trainType: "",
                deptId: "",
                date: "",
                duration: "",
                organizer: "",
                organizerId: "",
                trainer: "",
                trainerId: "",
                address: "",
                content: ""
            },
            trainId: "",
            deleteModal: false,
            removeTrainId: "",
            completeModal: false,
            completeTrainId: "",
            btnList: [],
            deptName: "",
            value:[],
            tableHeight:window.innerHeight - 305,
            maxlength:16,
            detailsModal:false,
            detailsObj:{},
            trainPhoto:[],
            trainPhotoArr:[],
            imgFlag:false,
            fileType:'2',
            fileUrl:'',
            detailsFileUrl:'',
            wordList:['doc','docx'],
            excelList:['xls','xlsx'],
            pptList:['pptx','ppt'],
            pdfList:['pdf'],
            imgList:['BMP','JPG','JPEG','PNG','GIF','gif','png','jpeg','jpg','bmp'],
            txtList:['txt'],
            videoList:['AVI','MOV','QT','ASF','RM','NAVI'],
            zipList:['RAR','ZIP','ARJ','Z','zip','rar','arj','z'],
            audioList:['acm','aif','AIF','AIFC','AIFF','asf','asp','asx','mp3','wma','avi','rm','rmvb','flv','mpg','mov','mkv'],
            acceptObj:".doc,.docx,.xls,.xlsx,.pptx,.pdf,.BMP,.JPG,.JPEG,.PNG,.GIF,.txt,.AVI,.MOV,.QT,.ASF,.RM,.NAVI,.acm,.aif,.AIF,.AIFC,.AIFF,.asf,.asp,.asx,.mp3,.wma,.avi,.rm,.rmvb,.flv,.mpg,.mov,.mkv,.RAR,.ZIP,.ARJ,.Z,"
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name;
                this.pageNum = 1;
                this.current = 1;
                this.keyword = "";
                this.trainType = "";
                this.stateType = "";
                this.startDate = "";
                this.endDate = "";
                this.getAllList();
                this.getEmpList();
            }
        },
        trainPhoto(val, oldVal){
            if(val.length==10){
                this.imgFlag=true
            }else{
                this.imgFlag=false

            }
        },
    },
    methods: {
        //获取组织者
        getOrganizer(index){
            this.train.organizerId = index;
            this.empList.forEach(i=>{
                if(index == i.empId){
                    this.train.organizer =i.empName
                }
            })
        },
        //获取培训者
        getTrainerId(index){
            this.train.trainerId = index;
            this.empList.forEach(i=>{
                if(index == i.empId){
                    this.train.trainer =i.empName
                }
            })
        },
        //获取所有人员
        getEmpList(){
            let params = {
                deptId :this.deptId
            }
            getAllPersonnelList(params).then(res=>{
                if(res.code == 200) {
                    this.empList =res.data.list;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        clearFlieFn(){
            this.fileUrl = '';
        },
        extname(filename) {
            if (!filename || typeof filename != "string") {
                return false;
            }
            let a = filename.split("").reverse().join("");
            let b = a.substring(0, a.search(/\./)).split("").reverse().join("");
            return b;
        },
        // 下载附件
        download(url){
            if(url){
                window.open(url);
            }else{
                this.$Message.warning("暂无附件");
            }
        },
        visibleChangeFn(e){
            if(!e){
                this.$refs.uploadImg.clearFiles();
            }
        },
        uploadSuccess(res, file) {
            this.fileUrl = res.data.path;
            this.$Message.success("上传成功");
        },
        // 图片大小检查
        beforeAvatarUpload(file) {
            this.fileType = this.extname(file.name);
            const isLt2M = file.size / 1024 / 1024 < 50;
            console.log(isLt2M)
            if (!isLt2M) {
                this.$Message.error("上传附件不能超过 50MB!");
            }
            return;
        },
        handleReportRemove(res, fileList){
            this.trainPhoto=[];
            this.trainPhotoArr=fileList;
            fileList.forEach(v=>{
                if(v.response){
                    this.trainPhoto.push(v.response.data)
                }else{
                    this.trainPhoto.push(v.url)
                }
            })
        },
        exceedImg(files,fileList){
            if(this.trainPhoto.length==10){
                this.$Message.warning('上传图片最多10张');
                return;
            }
        },
        reportlogImgSuccess(res){
            this.trainPhoto.push(res.data.path) ;
        },
        beforeIMgUpload(file){
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$Message.error("上传图片大小不能超过 2MB!");
            }
            return isLt2M;
        },
        
        //培训类型类型
        getTrainTypeList() {
            let params = {
                code: "train"
            };
            getTypeList(params).then(res => {
                if (res.code == 200) {
                    this.trainEmpTypeList = res.data.childList;
                    this.trainTypeList.push({
                        id:"",
                        name: "培训类型:全部"
                    })
                    this.trainEmpTypeList.forEach(i=>{
                        this.trainTypeList.push(i)
                    })

                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        //获取人员培训列表
        getAllList() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                keyword: this.keyword,
                deptId: this.deptId,
                trainType: this.trainType,
                state: this.stateType ,
                startDate: this.startDate,
                endDate: this.endDate
            };
            getAttendList(params).then(res => {
                if (res.code == 200) {
                    let list = res.data.list;
                    list.forEach(v => {
                        if(v.attachment && v.attachment.length > 0){
                            v['hz'] = this.extname(v.attachment[0])
                        }
                        if(v.trainPhoto && v.trainPhoto.length >0){
                            if(v.trainPhoto.length > 5){
                                v['trainPhotoArr'] = []
                                v.trainPhoto.forEach((img ,index) => {
                                    if(index < 5){
                                        v['trainPhotoArr'].push(img)
                                    }
                                })
                            }else{
                                v['trainPhotoArr'] = v.trainPhoto;
                            }
                        }
                    })
                    this.list = res.data.list;
                    this.totalCount = res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        pageChange(index) {
            if (this.trainType == undefined) {
                this.trainType = "";
            }
            if (this.stateType == undefined) {
                this.stateType = "";
            }
            this.pageNum = index;
            this.getAllList();
        },
        pageSizeChange(index){
            if (this.trainType == undefined) {
                this.trainType = "";
            }
            if (this.stateType == undefined) {
                this.stateType = "";
            }
            this.pageSize = index;
            this.getAllList();
        },
        getTime(value) {
            this.startDate = value[0];
            this.endDate =value[1];
        },
        
        onSerch() {
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        onReset(){
            this.trainType = null
            this.stateType = null
            this.keyword = null
            this.value = null
            this.startDate = null
            this.endDate =null
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        getTrainType(index) {
            this.train.trainType = index;
        },
        getDate(index) {
            this.train.date = index;
        },
        updateRow(type, index, rows) {
            if (type == 0) {
                this.updateModal = true;
                this.idAdd = true;
                this.train.name = "";
                this.train.date = "";
                this.train.duration = "";
                this.train.organizer = "";
                this.train.organizerId = "";
                this.train.trainer = "";
                this.train.trainerId = "";
                this.train.address = "";
                this.train.content = "";
                this.train.trainType = "";

            } else if (type == 1) {
                this.detailsModal = true;
                this.isAdd = false;
            }else if(type == 2){
                this.detailsModal = true;
                this.isAdd = true;
                this.detailsObj =  rows[index];
                this.detailsFileUrl = rows[index].attachment && rows[index].attachment.length > 0 ? rows[index].attachment[0] :'';
                if(this.detailsFileUrl){
                    this.detailsObj['hz'] = this.extname(this.detailsFileUrl);

                }
                this.train.state = rows[index].state;
                this.train.name = rows[index].name;
                this.trainId = rows[index].trainId;
                this.train.date = rows[index].date;
                this.train.duration = rows[index].duration;
                this.train.organizer = rows[index].organizer;
                this.train.organizerId = rows[index].organizerId;
                this.train.trainer = rows[index].trainer;
                this.train.trainerId = rows[index].trainerId;
                this.train.address = rows[index].address;
                this.train.content = rows[index].content;
                this.train.trainType = rows[index].trainType;
                this.train.trainType = rows[index].trainType;
                this.trainPhoto = rows[index].trainPhoto ? rows[index].trainPhoto : [];
                this.trainPhotoArr = []
                if(rows[index].trainPhoto && rows[index].trainPhoto.length > 0){
                    rows[index].trainPhoto.forEach((v ,i) => {
                        this.trainPhotoArr.push({url:v,name:String(i)})
                    })
                }
                this.fileUrl = rows[index].attachment && rows[index].attachment.length > 0 ? rows[index].attachment[0] :'';
            }
        },
        submitAll() {
            if (this.train.name == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入培训名称"
                });
                return;
            }
            if ( this.train.trainType == "" || this.train.trainType == undefined) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择培训类型"
                });
                return;
            }
            let params = {};
            if (this.isAdd) {
                params = {
                    name: this.train.name,
                    trainType: this.train.trainType,
                    deptId: this.deptId,
                    date: this.train.date,
                    duration: this.train.duration,
                    organizer: this.train.organizer,
                    organizerId: this.train.organizerId,
                    trainer: this.train.trainer,
                    trainerId: this.train.trainerId,
                    address: this.train.address,
                    content: this.train.content,
                    trainPhoto: this.trainPhoto,
                    attachment: [this.fileUrl],
                };
                getAttendAdd(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.success();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                params = {
                    trainId: this.trainId,
                    name: this.train.name,
                    trainType: this.train.trainType,
                    deptId: this.deptId,
                    date: this.train.date,
                    duration: this.train.duration,
                    organizer: this.train.organizer,
                    trainer: this.train.trainer,
                    address: this.train.address,
                    content: this.train.content,
                    trainPhoto: this.trainPhoto,
                    attachment: [this.fileUrl],
                };
                getAttendEdit(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.success();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        success() {
            this.$Message.success("操作成功");
            this.updateModal = false;
            this.detailsModal = false;
            this.pageNum = this.isAdd ? 1 : this.pageNum;
            this.current = this.isAdd ? 1 : this.current;
            this.trainPhoto = [];
            this.trainPhotoArr = [];
            this.$refs.uploadImg.clearFiles();
            if (this.trainType == undefined) {
                this.trainType = "";
            }
            if (this.stateType == undefined) {
                this.stateType = "";
            }
            this.getAllList();
        },
        remove(index, rows) {
            this.removeTrainId = rows[index].trainId;
            this.deleteModal = true;
        },
        detele() {
            getAttendRemove(this.removeTrainId)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.pageNum = 1;
                        this.getAllList();
                        this.deleteModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        complete(index, rows) {
            this.completeTrainId = rows[index].trainId;
            this.completeModal = true;
        },
        completeRecords() {
            getAttendComplete(this.completeTrainId).then(res => {
                if (res.code == 200) {
                    this.$Message.success("操作成功");
                    this.pageNum = 1;
                    this.getAllList();
                    this.completeModal = false;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        getTrainee(index, rows) {
            localStorage.setItem("state", rows[index].state);
            if(rows[index].source){
                if( rows[index].source == 'ms'){
                    this.$router.push({
                        path: "/emp/trainee",
                        query: { trainId: rows[index].trainId }
                    });
                }else{
                    this.$router.push({
                        path: "/emp/education",
                        query: { trainId: rows[index].trainId }
                    });
                }
            }else{
                this.$router.push({
                    path: "/emp/trainee",
                    query: { trainId: rows[index].trainId }
                });
            }
        },
        cancel(type) {
            if (type == 1) {
                this.updateModal = false;
            } else if (type == 2) {
                this.deleteModal = false;
            } else if (type == 3) {
                this.completeModal = false;
            }else if(type == 4){
                this.isAdd = true;
            }
        },
        clear() {
            this.pageNum = 1;
            this.current = 1;
            this.keyword = "";
            this.trainType = "";
            this.stateType = "";
            this.startDate = "";
            this.endDate = "";
            this.value =[];
            this.getAllList();
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.deptName = this.$store.state.porjectObject.name;
        this.getAllList();
        this.getEmpList();
        this.getTrainTypeList();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
    }
};
</script>


<style scoped lang="less">
// @import "./../../assets/style/emp_common.less";
@import "./../../assets/style/themeBase.less";
.empTrain{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .top {
        width: 100%;
        height: 72px;
        padding: 0 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search {
            padding-top: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-bottom: 20px;
                margin-right: 20px;
                span {
                    width: 70px;
                }
            }
        }
    }
    .bottom {
        width: 100%;
        margin-top: 10px;
        padding: 20px;
        box-sizing: border-box;
        height: calc(100% - 82px);
        background: #fff;
        border-radius: 10px;
    }
}
.msg {
    width: 96%;
    margin: 0 auto;
    margin-top: -20px;
    .list {
        width: 96%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .item {
            display: flex;
            justify-content: flex-start;
            //   align-items: center;
            position: relative;
            padding-left: 16px;
            box-sizing: border-box;
            span {
                display: block;
                width: 100px;
                height: 32px;
                line-height: 32px;
            }
            .tip {
                position: absolute;
                top:8px;
                left: 0;
                color: red;
                font-size: 16px;
            }
            .imgBox{
                /deep/.avatar-uploader{
                    flex: 1;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-wrap: wrap;


                }
                /deep/.el-upload--picture-card{
                    width: 60px;
                    height: 60px;
                    border: none;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    border-radius: 5px;
                    box-sizing: border-box;
                    background-color: #EEEEEE !important;
                }
                /deep/.avatar-uploader .el-upload:hover {
                    border-color: var(--themeColor);
                }
                /deep/.avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 60px;
                    height: 60px;
                    line-height: 60px;
                    text-align: center;
                }
                /deep/.el-upload--picture-card{
                    line-height: 77px !important;
                }
                /deep/.avatar {
                    width: 60px;
                    height: 60px;
                    display: block;
                }
                /deep/.el-upload-list--picture-card .el-upload-list__item {
                    width: 60px !important;
                    height: 60px !important;
                    margin-right: 10px;
                    margin-bottom: 10px;
                }
            }
        }
    }
}
h2 {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 400;
}
.hideAdd {
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
/deep/ .upload{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    //width: 100px;
    height: 60px;
    .clear{
        position: absolute;
        left: 170px;
        top: -8px;
        z-index: 10;
        width: 20px;
        height: 20px;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .avatar-uploader .el-upload {
        width: 60px;
        height: 60px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        box-sizing: border-box;
        background-color: #EEEEEE !important;
    }
    .avatar-uploader .el-upload:hover {
        border-color: var(--themeColor);
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }
    .avatar {
        width: 60px;
        height: 60px;
        display: block;
    }
}
/deep/ .el-icon-circle-close{
    color: #fff !important;
}

/deep/.ivu-input-group{
border-radius:20px;
}
/deep/.ivu-input-group .ivu-input{
    border-radius: 20px 0 0 20px;
    border-color:#EBF2F8;
    background:#EBF2F8;
}
/deep/.ivu-input-group-append{
    border-radius: 0 20px 20px 0;
    background:var(--themeColor)!important;
}
/deep/.el-tag.el-tag--info{
    background-color:rgba(169, 176, 187, 0.1);
    border-radius:2px;
    border-color:#A9B0BB;
    color:#A9B0BB;
}
/deep/.el-tag.el-tag--success{
    background-color: rgba(63, 207, 119, 0.1);
    border-color:#28D79C;
    color: #3FCF77;
    border-radius:2px;
}
</style>
